<template>
  <d2-container>
    <el-form inline
             style="width: 100%; text-align: left"
             label-width="80px"
             ref="form"
             class="flex-space-between"
             @submit.native.prevent="onSubmit"
             @reset.native.prevent="onReset"
             size="small">
      <div>
        <el-form-item>
          <el-button type="primary" @click="add">新增</el-button>
          <el-button type="primary" @click="deleteRow">删除</el-button>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="状态">
          <el-select v-model="query.status">
            <el-option label="全部"
                       value=""></el-option>
            <el-option label="显示"
                       value="0"></el-option>
            <el-option label="隐藏"
                       value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     native-type="submit">筛选
          </el-button>
          <el-button native-type="reset">重置</el-button>
        </el-form-item>
      </div>
    </el-form>
    <el-table :data="list"
              border
              :resizable="false"
              @selection-change="handleSelectionChange"
              stripe>
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="标题"
                       prop="title"></el-table-column>
      <el-table-column label="内容"
                       prop="content"></el-table-column>
      <el-table-column label="创建时间"
                       prop="time_create">
        <template slot-scope="{ row }">
          {{row.time_create | timeFilter}}
        </template>
      </el-table-column>
      <el-table-column label="状态"
                       prop="status">
        <template slot-scope="{ row }">
          {{row.status === 0 ? '显示' : '隐藏'}}
        </template>
      </el-table-column>
      <el-table-column fixed="right"
                       label="操作"
                       width="145">
        <template slot-scope="{row}">
          <el-button type="text"
                     size="small" @click="editRow(row)">编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination layout="total, prev, pager, next"
                   background
                   @current-change="fetch"
                   :current-page.sync="currentPage"
                   :page-size="limit"
                   style="display: flex;justify-content: center;"
                   :total="total">
    </el-pagination>
    <edit-dialog ref="editDialog"></edit-dialog>
  </d2-container>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import commonCurd from '@/mixin/common-curd'
import editDialog from './components/edit-dialog'
import { del } from './api'

export default {
  name: 'contact-customer',
  data () {
    return {
      query: {
        status: ''
      },
      multipleSelection: []
    }
  },
  components: {
    editDialog
  },
  mixins: [commonCurd],
  async asyncData ({ store, route }) {
    return store.dispatch('setting/contact-customer/fetchList', {
      page: 1,
      limit: 12
    })
  },
  computed: {
    ...mapGetters('setting/contact-customer', ['list', 'total'])
  },
  methods: {
    ...mapActions('setting/contact-customer', ['fetchList']),
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    async deleteRow () {
      if (!this.multipleSelection.length) {
        this.$message.warning('请选择需要删除的文章')
        return
      }
      const ids = this.multipleSelection.map(({ id }) => id)
      await del({ ids: ids.join(',') })
      this.multipleSelection = []
      this.$message.success('删除成功')
      this.fetch()
    },
    async editRow (row) {
      await this.$refs.editDialog.open(row)
      this.fetch()
    },
    async add () {
      await this.$refs.editDialog.open(false)
      this.fetch()
    },
    onSubmit () {
      this.fetch(1)
    },
    onReset () {
      this.$refs.form.resetFields()
      this.query = this.$options.data
      this.fetch(1)
    }
  }
}
</script>
<style lang="scss" scoped>
.fit-size {
  height: 80px;
}
</style>
